<template>
  <el-popover
    v-model:visible="visible"
    placement="bottom-start"
    :width="500"
    trigger="click"
    aria-hidden="true"
  >
    <template #reference>
      <div class="result">
        <div>{{ result }}</div>
        <div><el-icon-arrowup :class="{ rotate: visible }" /></div>
      </div>
    </template>
    <div class="container">
      <el-row>
        <el-col :span="8">
          <el-radio-group v-model="radioValue">
            <el-radio-button value="按城市">按城市</el-radio-button>
            <el-radio-button value="按省份">按省份</el-radio-button>
          </el-radio-group>
        </el-col>
        <!-- 搜索框 -->
        <el-col :span="15" :offset="1">
          <el-select v-model="selectValue"
          @change="changeSelect"
          filterable placeholder="请选择城市">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-col>
      </el-row>

      <template v-if="radioValue === '按城市'">
        <div class="city">
          <!-- 字母 -->
          <div
            class="city-item"
            @click="clickChat(item)"
            v-for="(item, index) in Object.keys(cities)"
            :key="index"
          >
            {{ item }}
          </div>
        </div>

        <el-scrollbar height="300px">
          <template v-for="(value, key) in cities" :key="key">
            <el-row style="margin-bottom: 10px" :id="key">
              <!-- id用于跳转 -->
              <el-col :span="2">{{ key }}:</el-col>
              <el-col :span="22" class="city-name">
                <div
                  @click="clickItem(item)"
                  class="city-name-item"
                  v-for="(item, index) in value"
                  :key="item.id"
                >
                  <div>{{ item.name }}</div>
                </div>
              </el-col>
            </el-row>
          </template>
        </el-scrollbar>
      </template>
      <template v-else>
        <div class="province">
          <div
            class="province-item"
            v-for="(item, index) in Object.keys(provinces)"
            :key="index"
            @click="clickChat(item)"
          >
            {{ item }}
          </div>
        </div>
        <el-scrollbar max-height="300px">
          <template
            v-for="(item, index) in Object.values(provinces)"
            :key="index"
          >
            <template v-for="(item1, index1) in item" :key="index1">
              <el-row style="margin-bottom: 10px" :id="item1.id">
                <el-col :span="3">{{ item1.name }}:</el-col>
                <el-col :span="21" class="province-name">
                  <div
                    class="province-name-item"
                    v-for="(item2, index2) in item1.data"
                    :key="index2"
                  >
                    <div @click="clickProvince(item2)">{{ item2 }}</div>
                  </div>
                </el-col>
              </el-row>
            </template>
          </template>
        </el-scrollbar>
      </template>
    </div>
  </el-popover>
</template>
<script lang="ts" setup>
import { ref, shallowRef, computed, onMounted } from "vue";
import city from "../lib/city";
import { City, Province } from "./types";
import province from "../lib/province.json";

let emits = defineEmits(["change-city"]);

let result = ref<string>("请选择");
let visible = ref<boolean>(false);
let radioValue = ref<string>("按城市");

let cities = shallowRef(city.cities);
// 所有省份的数据
let provinces = shallowRef(province);

// 搜索框
let selectValue = ref("");
let options = shallowRef<City[]>([]);
// 所有的城市数据
let allCity = shallowRef<City[]>([])

onMounted(() => {
  // 获取下拉框的城市数据
  let values = Object.values(cities.value).flat(2)
  allCity.value = values
  options.value = values
})

function changeSelect(id :number){
  console.log(id);
  debugger;
  let city = allCity.value.find(item => item.id === id)!

  result.value = city.name;
  visible.value = false;
  emits("change-city", city);
}

function clickChat(item: string) {
  let el = document.getElementById(item);
  if (el) {
    el.scrollIntoView({ behavior: "smooth" });
  }
}

function clickItem(item: City) {
  result.value = item.name;
  visible.value = false;
  emits("change-city", item);
}
function clickProvince(item: string) {
  console.log(item);
  result.value = item;
  visible.value = false;
  emits("change-city", item);
}
</script>
<style scoped lang="scss">
.result {
  display: flex;
  cursor: pointer;
  width: fit-content;
}
svg {
  width: 1em;
  height: 1em;
  position: relative;
  top: 2px;
  margin-left: 4px;
  transition: all 0.25s linear;
}
.rotate {
  transform: rotate(180deg);
}
.container {
  .province,
  .city {
    display: flex;
    flex-wrap: wrap;
    margin: 10px 0;
    align-items: center;
    &-item {
      cursor:pointer;
      padding: 3px 6px;
      margin: 5px;
      border: 1px solid #ccc;
    }
  }
  .city-name,
  .province-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .city-name-item,
    .province-name-item {
      cursor: pointer;
      padding: 0 3px 0 6px;
    }
  }
}
</style>
